<%--
  Created by IntelliJ IDEA.
  User: guokunjin
  Date: 2018/6/10
  Time: 8:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@include file="basePath.jsp"%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="title" content="${article.title}">
    <meta name="site" content="${article.title}">
    <meta name="Site" content="${article.title}">
    <meta name="title" content="${article.title}">
    <meta name="Title" content="${article.title}">
    <title>${article.title}</title>
    <link rel="shortcut icon" href="${basePath}favicon.ico">
    <link rel="stylesheet" type="text/css" href="${basePath}css/bootstrap.min.css">
    <link href="${basePath}css/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="${basePath}css/toastr.min.css" rel="stylesheet">
    <link href="${basePath}css/animate.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${basePath}css/common.css">
    <link rel="stylesheet" type="text/css" href="${basePath}css/article.css">
    <link rel="stylesheet" type="text/css" href="${basePath}css/share.min.css">
</head>
<body>

<nav class="collapse navbar-collapse navbar-fixed-top" id="bar" role="navigation">
    <ul class="nav nav-tabs navbar-left">
        <li><a href="${basePath}index.html">主页</a></li>
        <c:choose>
            <c:when test="${type_name_生活随笔.id!=article.type.id}">
                <li class="active"><a href="${basePath}list.html">学无止境</a></li>
                <li><a href="${basePath}life.html">生活随笔</a></li>
            </c:when>
            <c:otherwise>
                <li><a href="${basePath}list.html">学无止境</a></li>
                <li class="active"><a href="${basePath}life.html">生活随笔</a></li>
            </c:otherwise>
        </c:choose>
        <li><a href="${basePath}board.html">留言</a></li>
        <li><a href="${basePath}aboutMe.html">关于</a></li>
        <li><a target="_blank" href="http://guokunjin.cn:8080">进入后台</a></li>
    </ul>
    <div class="navbar-form navbar-right" id="search" role="search">
        <div class="form-group">
            <input type="text" name="keywords" class="form-control" placeholder="Searching...">
        </div>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
    </div>
</nav>


<div class="content-wrap">
    <div class="content col-sm-7 ">
        <div class="breadcrumbs">
            <a title="返回首页" href="${basePath}index.html"> <i class="fa fa-home fa-lg"></i></a>
            <small>&gt;</small>
            <c:choose>
                <c:when test="${type_name_生活随笔.id!=article.type.id}">
                    <a href="${basePath}list.html">学无止境 </a>
                    <small>&gt;</small>
                    <a href="${basePath}list.html?type=${article.typeId}" class="a-type">${article.type.name}</a>
                </c:when>
                <c:otherwise>
                    <a href="${basePath}life.html" class="a-type">生活随笔</a>
                </c:otherwise>
            </c:choose>
            <small>&gt;</small>
            <span class="muted a-title">${article.title}</span>
        </div>

        <header class="article-header">
            <h1 class="article-title a-title">${article.title}</h1>
            <div id="tags" class="article-tags">
                <c:forEach var="tag" items="${article.tags}" varStatus="status">
                    <a href="${basePath}/list.html?tagId=${tag.id}" title="${tag.description}"><i class="fa fa-tag"></i>${tag.name}</a>
                </c:forEach>
            </div>
            <div class="meta" style="text-align: center">

                <span class="muted"><i class="fa fa-list-alt"></i><a href="${basePath}list.html?type=${article.typeId}" class="a-type" >${article.type.name}</a></span>
                <time class="muted"><i class="fa fa-clock-o"></i> <span><fmt:formatDate value="${article.createTime}" pattern="yyyy-MM-dd"/></span></time>
                <span class="muted"><i class="fa fa-eye"></i> <span>${article.lookCount}</span></span>
                <span class="muted"><i class="fa fa-thumbs-up"></i> <span >${article.loveCount}</span></span>
                <span class="muted"><i class="fa fa-comments-o"></i>
                    <a href="#comment-box">
                        <span id="changyan_count_unit"></span>
                    </a>
                        <%--<a href="#" class="a-commentCount">${article.commentCount}</a>评论--%>
                </span>
            </div>
        </header>

        <div class="article-content">
            ${article.content}
        </div>
        <div class="nextinfo">
            <c:if test="${preAndNext.prev!=null}">
                <p>上一篇：<a href="${basePath}article/${preAndNext.prev.id}.html">${preAndNext.prev.title}</a></p>
            </c:if>
            <c:if test="${preAndNext.next!=null}">
                <p>下一篇：<a href="${basePath}article/${preAndNext.next.id}.html">${preAndNext.next.title}</a></p>
            </c:if>
        </div>
        <div class="otherlink">
            <h2 class="title">相关文章</h2>
            <ul>
                <c:forEach items="${relatives}" var="relative" >
                    <li><a href="${basePath}article/${relative.id}.html" title="${relative.title}">${relative.title}</a></li>
                </c:forEach>
            </ul>
        </div>
        <div class="shareArticle">
            <span class="h">赞一下？</span>
            <button class="btn btn-danger btn-circle btn-outline praise" type="button"><i class="fa fa-thumbs-up"></i>
            </button>
            <span class="h">分享到：</span>
            <span id="share" data-wechat-qrcode-title="请打开微信扫一扫"></span>
        </div>
        <div id="comment-box" class="comment">
            <div id="SOHUCS" sid="${article.id}"></div>
        </div>

    </div>

    <div class="col-sm-4 blog-sidebar pull-right">
        <jsp:include page="comment-sidebar.jsp"/>
    </div>
</div>



<%@include file="footer.jsp"%>
</body>
<script type="text/javascript" src="${basePath}js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="${basePath}js/bootstrap.min.js"></script>
<script type="text/javascript" src="${basePath}js/toastr.min.js"></script>
<script type="text/javascript" src="${basePath}js/common.js"></script>
<script type="text/javascript" src="${basePath}js/jquery.share.min.js"></script>
<script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script>
<script type="text/javascript" src="https://assets.changyan.sohu.com/upload/plugins/plugins.count.js"></script>
<script type="text/javascript">
    window.changyan.api.config({
        appid: 'cytF3GqGY',
        conf: 'prod_2b9e1be433bf40dd1ffbdd248c8cd468'
    });
    $(function(){
        $('#share').share({sites: ['qzone', 'qq', 'weibo','wechat']});
        $(".praise").click(function(){
            $.ajax({
                url:'/api/article/doPraise/'+${article.id},
                type:'post',
                success:function(resp){
                    if(resp.status==200){
                        toastr.success(resp.message);
                    }else{
                        toastr.info(resp.message);
                    }
                }
            });
        });
    });
</script>

</html>

